<template>
	<view v-if="hasPermission">
		<view v-if="userInfo.sysUser.compId === null">
			<view class="box" v-for="(mContent,index) in managementContent" :key="index">
				<!-- 模块名称 -->
				<view class="boxTitle">{{mContent.title}}</view>
				<view class="boxContent">
					<view class="boxUnit" v-for="(item,unitKey) in mContent.unit" :key="unitKey">
						<view v-if="item!=''">
							<!-- 图标 -->
							<image :src="'http://101.206.123.213:7051/static/image/management/'+item+'.png'"
								class="photo" @click="navigaterTo(item)" />
							<!-- 名称 -->
							<view class="imgName">{{item}}</view>
						</view>
						<view v-else>
							<view class="photo" style="height: 0;" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="box" v-for="(mContent,index) in managementContentComp" :key="index">
				<!-- 模块名称 -->
				<view class="boxTitle">{{mContent.title}}</view>
				<view class="boxContent">
					<view class="boxUnit" v-for="(item,unitKey) in mContent.unit" :key="unitKey">
						<view v-if="item!=''">
							<!-- 图标 -->
							<image :src="'http://101.206.123.213:7051/static/image/management/'+item+'.png'"
								class="photo" @click="navigaterTo(item)" />
							<!-- 名称 -->
							<view class="imgName">{{item}}</view>
						</view>
						<view v-else>
							<view class="photo" style="height: 0;" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view v-else>
		<image src="http://101.206.123.213:7051/static/image/common/noPermission.png" class="noPerssionShow"></image>
		<view style="font-weight: bold;position: absolute;left: 20%;bottom: 20%;">暂无权限,请联系管理员审核!</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasPermission: true,
				managementContent: [{
						title: '智慧园区',
						// unit: ['预警信息', '预警通知', '实时视频', '视频回放', '门禁数据']
						unit: ['预警通知', '门禁数据', '', '', '']
					},
					{
						title: '智慧交通',
						unit: ['预警信息', '实时视频', '视频回放', '', '']
					},
					{
						title: '物业管理',
						unit: ['报修管理', '巡检管理', '缴费管理', '预约审批', '来访审批']
					}
				],
				managementContentComp: [{
					title: '物业管理',
					unit: ['缴费管理', '来访审批','','']
				}],
				navigateArr: [{
						name: '预警通知',
						src: '',
					},
					{
						name: '门禁数据',
						src: ''
					},
					{
						name: '预警信息',
						src: ''
					},
					{
						name: '实时视频',
						src: '../monitor/monitor'
					},
					{
						name: '视频回放',
						src: '../vedioPlayBack/vedioPlayBack'
					},
					{
						name: '报修管理',
						src: '../warrantyManage/warrantyManage'
					},
					{
						name: '巡检管理',
						src: ''
					},
					{
						name: '缴费管理',
						src: '../paymentManagement/paymentManagement'
					},
					{
						name: '预约审批',
						src: '../bookApproval/bookApproval'
					},
					{
						name: '来访审批',
						src: '../visitApproval/visitApproval'
					}
				],
				userInfo: []
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			if (this.userInfo.sysUser.userId === null || this.userInfo.sysUser.userId === undefined) {
				this.hasPermission = false
			}
		},
		methods: {
			navigaterTo(data) {
				let navigator = this.navigateArr.find(item => item.name.indexOf(data) > -1)
				if (navigator.src != '') {
					uni.navigateTo({
						url: navigator.src + '?name=' + data
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: "该功能还在开发中，请使用其他功能！..."
					})
				}

			},
		}
	}
</script>

<style>
	@import url("/static/font/iconfont.css");
</style>
<style scoped>
	.noPerssionShow {
		width: 80%;
		padding: 30% 0;
		margin: 0 auto;
		display: block;
	}

	.sbody1 {
		height: 100vh;
		padding: 20rpx;
	}

	.sbody2 {
		height: 100vh;
		background-color: #fff;
	}

	.imgName {
		margin-top: 20rpx;
		font-size: 24rpx;
	}

	.photo {
		width: 100rpx;
		height: 100rpx;
	}

	.boxContent {
		width: 100%;
		height: 80%;
		display: flex;
		font-size: 24rpx;
		justify-content: space-around;
	}

	.boxUnit {
		padding-top: 8%;
		color: #444;
	}

	.boxTitle {
		font-weight: bold;
	}

	.box {
		width: calc(100% - 40rpx);
		height: 25%;
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
</style>
